/**
 * 图片坐标获取工具类
 * 用于获取图片点击位置的坐标，支持相对于显示图片和原始图片的坐标计算
 */

/**
 * 获取图片点击位置的坐标信息
 * @param {Event} event - 点击事件对象
 * @param {HTMLImageElement} image - 图片元素
 * @returns {Object} 包含各种坐标信息的对象
 */
export function getImageCoordinates(event, image) {
  const rect = image.getBoundingClientRect();
  
  // 计算相对于图片的坐标
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  
  // 获取图片的原始尺寸和显示尺寸
  const naturalWidth = image.naturalWidth;
  const naturalHeight = image.naturalHeight;
  const displayWidth = rect.width;
  const displayHeight = rect.height;
  
  // 计算相对于原始图片的坐标
  const scaleX = naturalWidth / displayWidth;
  const scaleY = naturalHeight / displayHeight;
  
  const originalX = Math.round(x * scaleX);
  const originalY = Math.round(y * scaleY);
  
  // 返回详细的坐标信息
  return {
    // 相对于显示图片的坐标
    displayX: Math.round(x),
    displayY: Math.round(y),
    
    // 相对于原始图片的坐标
    originalX,
    originalY,
    
    // 图片尺寸信息
    naturalWidth,
    naturalHeight,
    displayWidth,
    displayHeight,
    
    // 缩放比例
    scaleX,
    scaleY,
    
    // 格式化的坐标字符串
    displayCoords: `${Math.round(x)}, ${Math.round(y)}`,
    originalCoords: `${originalX}, ${originalY}`,
    
    // 矩形区域坐标字符串（以点击点为中心的50x50区域）
    rectCoords: `${originalX - 25}, ${originalY - 25}, ${originalX + 25}, ${originalY + 25}`
  };
}

/**
 * 打印图片坐标信息到控制台
 * @param {Event} event - 点击事件对象
 * @param {HTMLImageElement} image - 图片元素
 */
export function logImageCoordinates(event, image) {
  const coords = getImageCoordinates(event, image);
  
  console.log('=== 图片坐标信息 ===');
  console.log(`点击位置 - 相对于显示图片: (${coords.displayX}, ${coords.displayY})`);
  console.log(`点击位置 - 相对于原始图片: (${coords.originalX}, ${coords.originalY})`);
  console.log(`图片原始尺寸: ${coords.naturalWidth} x ${coords.naturalHeight}`);
  console.log(`图片显示尺寸: ${coords.displayWidth} x ${coords.displayHeight}`);
  console.log(`缩放比例: X=${coords.scaleX.toFixed(2)}, Y=${coords.scaleY.toFixed(2)}`);
  
  return coords;
}

/**
 * 显示图片坐标信息的提示框
 * @param {Event} event - 点击事件对象
 * @param {HTMLImageElement} image - 图片元素
 */
export function alertImageCoordinates(event, image) {
  const coords = getImageCoordinates(event, image);
  
  alert(`点击坐标信息:
显示图片坐标: (${coords.displayX}, ${coords.displayY})
原始图片坐标: (${coords.originalX}, ${coords.originalY})
图片尺寸: ${coords.naturalWidth} x ${coords.naturalHeight}`);
  
  return coords;
}

/**
 * 获取图片的原始尺寸
 * @param {HTMLImageElement} image - 图片元素
 * @returns {Object} 包含图片原始尺寸的对象
 */
export function getImageNaturalSize(image) {
  return {
    width: image.naturalWidth,
    height: image.naturalHeight
  };
}

/**
 * 打印图片尺寸信息到控制台
 * @param {HTMLImageElement} image - 图片元素
 */
export function logImageSize(image) {
  const size = getImageNaturalSize(image);
  console.log(`图片原始尺寸: ${size.width} x ${size.height}`);
  return size;
}

export default {
  getImageCoordinates,
  logImageCoordinates,
  alertImageCoordinates,
  getImageNaturalSize,
  logImageSize
};